<script setup lang="ts">
import { NAvatar, NIcon, NText, NSpace, NDropdown, NProgress, NTag } from 'naive-ui'
import { h, onMounted, ref, computed } from 'vue'
import {
  Settings,
  LogOut,
  Person,
  ChatbubbleEllipses,
  People,
  Document,
  InformationCircle
} from '@vicons/ionicons5'
import { Robot, Magnet } from '@vicons/tabler'
import logoImage from '@/assets/logo_image.png'
import { useRoute } from 'vue-router'

interface NavMenuItem {
  label: string
  key: string
  icon: any
}

const renderIcon = (icon: any) => () => h(NIcon, null, { default: () => h(icon) })
const percentageRef = ref(10)
const activeKey = ref('')
const currentRoute = useRoute()

const renderCustomHeader = () => {
  const renderUserInfo = () =>
    h('div', { style: 'display: flex; align-items: center; padding: 8px 12px;' }, [
      h(NAvatar, {
        round: true,
        style: 'margin-right: 12px;',
        src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG'
      }),
      h('div', { style: 'display: flex; flex-direction: column;' }, [
        h(NText, { depth: 2 }, { default: () => 'Me@tioit.cc' }),
        h(
          NTag,
          { size: 'tiny', type: 'default' },
          {
            default: () =>
              h(
                NText,
                {
                  style: 'font-size: 10px;',
                  class: 'cursor-pointer'
                },
                { default: () => '免费计划' }
              )
          }
        )
      ])
    ])

  const renderProgressInfo = () =>
    h('div', { style: 'padding: 8px 12px;' }, [
      h(NText, { depth: 3, style: 'font-size: 12px;' }, { default: () => '668/100010' }),
      h(NProgress, { type: 'line', percentage: percentageRef.value, showIndicator: false })
    ])

  return h('div', {}, [renderUserInfo(), renderProgressInfo()])
}

const userDropdownOptions = [
  {
    key: 'header',
    type: 'render',
    render: renderCustomHeader
  },
  {
    label: '工作空间',
    key: 'workspace',
    icon: renderIcon(Person)
  },
  {
    label: '设置',
    key: 'settings',
    icon: renderIcon(Settings)
  },
  {
    label: '用户反馈',
    key: 'feedback',
    icon: renderIcon(ChatbubbleEllipses)
  },
  {
    type: 'group',
    label: '其他',
    key: 'others',
    children: [
      { label: '社区', key: 'community', icon: renderIcon(People) },
      { label: '帮助文档', key: 'help-docs', icon: renderIcon(Document) },
      { label: '关于', key: 'about', icon: renderIcon(InformationCircle) }
    ]
  },
  {
    label: '登出',
    key: 'logout',
    icon: renderIcon(LogOut)
  }
]

const handleUserDropdown = (key: string) => {
  console.log('User dropdown selected:', key)
}

const navMenus: NavMenuItem[] = [
  {
    label: '发现',
    key: 'find',
    icon: Robot
  },
  {
    label: '大模型 Studio',
    key: 'llm-studio',
    icon: Robot
  },
  {
    label: '图像影音 Studio',
    key: 'media-studio',
    icon: Magnet
  }
]

const activeMenuItem = computed(() => {
  if (currentRoute.path.includes('llm-studio')) return 'llm-studio'
  if (currentRoute.path.includes('media-studio')) return 'media-studio'
  return 'find'
})

onMounted(() => {
  activeKey.value = activeMenuItem.value
})
</script>

<template>
  <header class="h-50px border-b border-[#f0f0f0] w-full bg-gray-100">
    <NSpace justify="space-between" align="center" class="px-20px h-full w-full">
      <a class="flex items-center h-40px w-90px">
        <img :src="logoImage" alt="Logo" class="object-contain w-full" />
      </a>
      <nav class="flex gap-10px">
        <a
          v-for="item in navMenus"
          :key="item.key"
          :class="[
            'flex items-center justify-center h-30px px-15px py-2px cursor-pointer rounded-xl transition-all duration-300 ease-in-out',
            'hover:bg-[#e8e9e9]',
            {
              'bg-white shadow-md hover:bg-white': activeKey === item.key
            }
          ]"
          @click="activeKey = item.key"
        >
          <NIcon
            size="16"
            :class="['mr-8px', { 'text-[#155aef] font-600': activeKey === item.key }]"
          >
            <component :is="item.icon" />
          </NIcon>
          <span
            :class="[
              'text-14px leading-14px text-[#495464]',
              { 'text-[#155aef] font-600': activeKey === item.key }
            ]"
          >
            {{ item.label }}
          </span>
        </a>
      </nav>
      <NDropdown
        :options="userDropdownOptions"
        @select="handleUserDropdown"
        trigger="click"
        class="w-200px"
      >
        <div
          class="flex items-center p-5px w-180px rounded-30px transition-all duration-300 ease-in-out hover:bg-[#e8e9e9]"
        >
          <NAvatar src="https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG" round />
          <div class="ml-10px overflow-hidden w-[calc(100%-44px)]">
            <div class="font-600 text-12px truncate">打工仔超长名称示例aaaaa</div>
            <div class="text-10px text-[#6b7280] truncate">12345678900@qq.com</div>
          </div>
        </div>
      </NDropdown>
    </NSpace>
  </header>
</template>
